<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 统一响应式数据
const userinfo = ref({
  name: '',
  email: '',
  area: '',
  address: '',
  code: '',
  phone: ''
});

const radio = ref('1');
const value2 = ref('');

const pickerOptions = {
  disabledDate(time) {
    return time.getTime() > Date.now();
  },
  shortcuts: [
    {
      text: '今天',
      onClick(picker) {
        picker.$emit('pick', new Date());
      }
    },
    {
      text: '昨天',
      onClick(picker) {
        const date = new Date();
        date.setTime(date.getTime() - 3600 * 1000 * 24);
        picker.$emit('pick', date);
      }
    },
    {
      text: '一周前',
      onClick(picker) {
        const date = new Date();
        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit('pick', date);
      }
    }
  ]
};


//仅提交数据并没有使用api
const isSubmitting = ref(false);

const submitForm = async () => {
  isSubmitting.value = true;
  try {
    if (!userinfo.value.name || !userinfo.value.email || !userinfo.value.area || !userinfo.value.address) {
      ElMessage.error('请填写所有必填字段');
      return;
    }
    
    console.log('提交数据:', {
      ...userinfo.value,
      gender: radio.value,
      birthday: value2.value
    });
    
    ElMessage.success('保存成功');
  } catch (error) {
    console.error('保存失败:', error);
    ElMessage.error('保存失败，请重试');
  } finally {
    isSubmitting.value = false;
  }
};
</script>


<template>
      <div id="b">
        <form @submit.prevent="submitForm">
          <div id="ba">个人交易信息 
            <div id="bb" style="margin: 0px 0px 0px 800px;width: 100px;height: 10px;">*表示必填</div>
          </div>
          <div id="bc" style="font-size: 30px; margin: 10px 0px 0px 20px ;">
            真实姓名： 
            <input v-model="userinfo.name" placeholder="请输入真实姓名" required>
          </div>
          <div id="bd" style="font-size: 20px; margin: 5px 0px 0px 30px ;">
            登录到邮箱地址：<input v-model="userinfo.email" type="email" required>
          </div>
          <div id="be" style="display: flex; margin: 10px 0px 0px 40px; ">
            *&ensp;性别：<el-radio v-model="radio" label="1">男</el-radio><el-radio v-model="radio" label="2">女</el-radio>
          </div>
          <div id="bf" style="margin: 10px 0px 0px 55px;">
            生日：
            <el-date-picker
              v-model="value2"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <div id="bg" style="margin: 10px 0px 0px 40px;">
            *&ensp;&ensp;个人所在地：<input v-model="userinfo.area" type="text" required>
          </div>
          <div id="bh" style="margin: 10px 0px 0px 40px;">
            *&ensp;&ensp;详细地址：<input v-model="userinfo.address" type="text" required>
          </div>
          <div id="bj" style="margin: 10px 0px 0px 40px;">
            邮政编码：<input type="text" v-model="userinfo.code">
          </div>
          <div id="bi" style="margin: 10px 0px 0px 40px;">
            固定电话：<input type="text" v-model="userinfo.phone">
          </div>

          <!-- 保存按钮改为提交按钮 -->
          <div id="bk">
            <div class="layui-bit">
              <button type="submit" class="layui-btn" :disabled="isSubmitting">
                {{ isSubmitting ? '保存中...' : '保存' }}
              </button>
            </div>
          </div>
        </form>
      </div>
</template>

<!-- 样式保持不变 -->
<style>
#header,#footer{
    height: 100px;
    background-color: rgb(255, 174, 0);
  }

  #footer{
    height: 200px;
    /* margin-bottom: 0%; */
    position: absolute;
    bottom: 0;
    width: 100%;
  }

  .headerinfo{
    right: 5%;
    margin-right: 5%;
    height: 100px;
    line-height: 100px;
    font-size: 20px;
  }

  .headerinfo a{
    text-decoration: none;
  } 

  #logininfo {
  
    margin-top:5%;
    /* margin-left: 10%; */
    height: 300px;
  }

  #logo{
    margin-left: 10%;
    height: 100px;
    width: 150px;
  }

  #logo img{
    width: 100%;
    height: 100%;
  }

#an{
    height: 630px;
    width: 1300px;
    /* background-color: red; */
    border: 1px solid rgb(0, 0, 0);
    margin: 0 auto;
    display: flex;
}
#a{
    width: 300px;
    height: 630px;
    /* border: 1px solid rgb(254, 6, 6); */
    
    /* background-color: rgb(85, 85, 166); */
}
#b{
    width: 1000px;
    height: 630px;
    /* border: 1px solid rgb(51, 0, 255); */
    /* background-color: rgb(114, 147, 169); */
 
}
#g{
    height: 40px;
    width: 120px;
    margin:  37px 0px 0px 90px ;
    background-color: rgb(236, 128, 141);
   
    text-align: center;
    font-size: 15px;
    /* 行高 */
    line-height: 40px;
    color: white;
}
#c{
    height: 40px;
    width: 120px;
    margin:  37px 0px 0px 90px ;
    background-color: rgb(207, 24, 45);
    text-align: center;
    font-size: 15px;
    line-height: 40px;
    color: white;
}
.g{
    height: 40px;
    width: 120px;
    margin:  37px 0px 0px 90px ;
 /* background-color: rgb(85, 85, 166); */
    text-align: center;
    font-size: 15px;

    line-height: 40px;
    color: black;
}
#ba{
    width: 1000px;
    height: 22px;
    border: 1px solid black;
    display: flex;
    margin: 20px 0px 0px 0px;
}
#bk{
  width: 100px;
  height: 100px;
  margin: 50px 0px 0px 400px;
}
</style>